<template>
	<div class="box" id="app">
		<div class="head">
			<h1>购物车</h1>
			<p>
				已选商品{{ totalCount }}件 (不含运费):{{ totalPrice |toTwo }}
				<button>结算</button>
			</p>
		</div>
		<div class="content">
			<div class="c-head">
				<div class="check">
					<label>
						<input type="checkbox" v-model="allCheck"/>
						全选
					</label>
				</div>
				<div class="msg">商品信息</div>
				<div class="price">单价</div>
				<div class="num">数量</div>
				<div class="sum">金额</div>
				<div class="operate">操作</div>
			</div>
			<div class="main">
				<div class="item" v-for="item in list" :key="item.id">
					<div class="check"><input type="checkbox" name="ccc" :value="item.id"  v-model="checkList"/></div>
					<div class="msg">
						<img :src="item.img" alt="" width="80" />
						<p>{{ item.name }}</p>
					</div>
					<div class="price">{{ item.price|toTwo }}</div>
					<div class="num">
						<button @click="item.num === 1 || item.num--">-</button>
						<input type="text" v-model.number="item.num" />
						<button @click="item.num++">+</button>
					</div>
					<div class="sum">{{ item.num * item.price |toTwo }}</div>
					<div class="operate"><a href="javascript:;" @click="onDelete(item.id)">删除</a></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			checkList:[1,2],
			list: [
				{
					id: 1,
					img: 'https://img.alicdn.com/bao/uploaded/i2/4028000468/O1CN01FSCCHj1FKO17wO7UV_!!0-item_pic.jpg_80x80.jpg',
					name: '2021新web前端开发视频课程教程入门精通全栈实战项目零基础培训',
					price: 30,
					num: 3,
					isChecked: true
				},
				{
					id: 2,
					img: 'https://img.alicdn.com/bao/uploaded/i4/352798170/TB1XSlka1GSBuNjSspbXXciipXa_!!0-item_pic.jpg_80x80.jpg',
					name: '现货 你不知道的JavaScript 上卷+中卷+下卷 3册 web前端开发书籍',
					price: 138.8,
					num: 3
				},
				{
					id: 3,
					img: 'https://img.alicdn.com/bao/uploaded/i3/3346581898/O1CN01gjFyT71PtKHdJ4sIK_!!0-item_pic.jpg_80x80.jpg',
					name: '【高阶全套】web前端开发视频教程jQuery网页设计CSS3/javascript',
					price: 199,
					num: 3
				},
				{
					id: 4,
					img: 'https://img.alicdn.com/bao/uploaded/i1/101450072/O1CN01LXctHl1CP17AFZ1qT_!!0-item_pic.jpg_80x80.jpg',
					name: 'JavaScript高级程序设计(第3版)JS入门到精通书籍JavaScript权指南配套前',
					price: 73.9,
					num: 3
				},
				{
					id: 5,
					img: 'https://img.alicdn.com/imgextra/i1/352798170/O1CN01bQTNb42ADuRybT7dd_!!352798170-0-lubanu-s.jpg_430x430q90.jpg',
					name: '计算机网络实验教程 2版二版 高等教育出版社 钱德沛 张力军 计算机网络工程技术参考书 计算机类专业网络实验课程教材图书籍',
					price: 46.5,
					num: 3
				}
			]
		};
	},
	computed:{
		allCheck:{
			get(){
				return this.checkList.length===this.list.length
			},
			set(val){
				this.checkList = val?this.list.map(item=>item.id):[]
			}
		},
		totalCount(){
			return this.list.reduce((total,item)=>this.checkList.includes(item.id)?total + item.num:total,0)
		},
		totalPrice(){
			return this.list.reduce((total,item)=>this.checkList.includes(item.id)?total + item.num*item.price:total,0)
		}
	},
	methods:{
		onDelete(id){
			this.list = this.list.filter(item=>item.id!==id)
			let index = this.checkList.indexOf(id)
			if(index>=0){
				this.checkList.splice(index,1)
			}
		}
	},
	filters:{
		toTwo(val){
			return   '￥'+val.toFixed(2)
		}
	}
};
</script>

<style>
* {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

body {
	background-color: #eae8eb;
	font-size: #333;
}

.box {
	width: 1000px;
	margin: 40px auto;
	background-color: #fff;
	border-radius: 20px;
}

.box .head {
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #000;
}

.box .head h1 {
	font-size: 20px;
}

.box .head button {
	padding: 5px 10px;
	border: 1px solid #ccc;
	background-color: #fff;
	font-size: 12px;
	margin-left: 10px;
}

.content {
	padding: 20px;
}

.content .c-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	padding: 20px;
}

.content .c-head input {
	margin-right: 10px;
}

.content .main .item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color: #eee;
	margin-bottom: 20px;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
}

.content .check {
	width: 80px;
}

.content .msg {
	width: 300px;
	display: flex;
}

.content .msg p {
	text-align: left;
	padding-left: 10px;
	font-size: 12px;
}

.content .price {
	width: 80px;
}

.content .num {
	width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content .num button {
	width: 20px;
	height: 20px;
}

.content .num input {
	width: 60px;
	height: 20px;
	box-sizing: border-box;
	text-align: center;
}

.content .sum {
	width: 80px;
}

.content .operate {
	width: 80px;
}

.content .operate a {
	color: #000;
	font-weight: bold;
}
</style>
